import { App } from 'vue'
import XtxSkeleton from '@/components/skeleton/index.vue'
import XtxCarousel from '@/components/carousel/index.vue'
import XtxMore from '@/components/more/index.vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
import Bread from '@/components/bread/index.vue'
import BreadItem from '@/components/bread/item.vue'
import XtxCity from '@/components/city/index.vue'
import Numbox from '@/components/Numbox/index.vue'
import Button from '@/components/button/index.vue'
import Checkbox from './checkbox/index.vue'

export default {
  install(app:App){
    app.component(XtxSkeleton.name, XtxSkeleton)
    app.component(XtxCarousel.name, XtxCarousel)
    app.component(XtxMore.name, XtxMore)
    app.component('XtxBread', Bread)
    app.component('XtxBreadItem', BreadItem)
    app.component('XtxCity', XtxCity)
    app.component(Numbox.name, Numbox)
    app.component(Button.name, Button)
    app.component(Checkbox.name, Checkbox)

    app.directive('lazy',{
      mounted(el,binding){
           useIntersectionObserver(el,([{ isIntersecting }]) => {
               if(isIntersecting){
                el.src = binding.value
               }
           })
           el.onerror = () =>{
              el.src = defaultImg
           }
           
      }
    })
  }
}